<template>
	<view>
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view style="padding: 20rpx;"class="u-flex-col">
			<view style="" class="u-flex">
				<u-icon name="arrow-left"size="45"color="#000" @click="topleftClick"></u-icon>
				<u-search placeholder="搜索书评" shape="square" style="margin-left:25rpx;"
				@custom="custom" v-model="search"></u-search>
			</view>
			<view class="u-flex" style="margin: 30rpx 0;">
				<view style="padding:20rpx 30rpx;margin: 10rpx;
				border-radius: 0.5em;" v-for="(item,index) in topList" :key="index"
				:class="avriveTop == index?'avtive':''" class="topitem" @click="topItem(index)">
					{{item.name}}<text style="margin-left: 10rpx;">{{item.x}}</text>
				</view>
			</view>
			<view style="padding-bottom: 150rpx;">
				<view v-for="(item,index) in comments" :key="index" >
					<u-line :hair-line="false"></u-line>
					<comment :item="item"></comment>
				</view>
			</view>
			
			<view v-if="comments.length == 0"style="text-align: center;margin-top: 100rpx;">
				暂无评论
			</view>
		</view>
		<view class="u-flex" style="position: fixed;bottom: 0;width: 100%;background-color: #fafafa;">
			<view style="width: 100%;position: relative;">
				<u-input placeholder="发表评论" border autoHeight type="textarea" v-model="input"
				style="background-color: #f2f2f2;margin: 20rpx;"maxlength="200"></u-input>
				<text style="position: absolute;bottom: 0;right: 0;margin: 25rpx;"
				:class="input.length == 200?'red':''">
				{{input.length}}/200</text>
			</view>
			<view style="margin-right: 35rpx; padding: 15rpx 30rpx; border-radius: 2em;
			 background-color: #f26e2b;color: #FFFFFF;font-weight: bold;" @click="addCommentClick">发&nbsp;表</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				input:"",
				search:"",
				avriveTop:0,
				bookDataId:0,
				topList:[
					{id:1,name:"全部",x:0},
					{id:2,name:"最新",x:null},
					{id:3,name:"长评",x:null}
				],
				comments:[],
				commentsList:[],
				commentsMax:[],
				user:{}
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			topleftClick(){
				uni.navigateBack({
					
				})
			},
			topItem(e){
				this.comments = []
				this.avriveTop = e
				if(e == 0){
					this.comments  = this.commentsList
				}else if(e == 1){
					console.log("e")
					this.comments = this.commentsList.sort((a,b)=>b.commentTime - a.commentTime)
				}else if(e == 2){
					this.comments = this.commentsMax
				}
			},
			async getComments(id){
				const res=await this.$myRequst({
					url:'/comment/gets/'+id
				})
				this.commentsList = res.data.data
				console.log(res.data.data)
				this.topList[0].x = this.commentsList.length
				this.commentsMax = this.commentsList.filter(item=>item.content.length > 100)
				console.log(this.commentsMax)
				this.topList[2].x = this.commentsMax.length
				this.comments = this.commentsList
			},
			async custom(e){
			 	console.log(e)
				const res=await this.$myRequst({
					url:"/comment/gets/content?id="+this.bookDataId+"&content="+e
				})
				this.comments = res.data.data
				this.search = ""
			},
			async addCommentClick(){
				console.log()
				if(this.input == ""){
					return uni.showToast({
						title:"评论内容不能为空"
					})
				}
				const res=await this.$myRequst({
					url:"/comment/post",
					method:"POST",
					data:{
						bookdataId:this.bookDataId,
						content:this.input,
						commentTime:Date.now(),
						userId:uni.getStorageSync("userId"),
						userName:this.user.userName
					}
				})
				console.log(res.data.code)
				if(res.data.code == 200){
					return uni.showToast({
						title:"发表成功",
						success: (res) => {
							this.getComments(this.bookDataId)
							this.input = ""
						}
					})
				}

			},
			async getUserId(){
				const res=await this.$myRequst({
					url:"/user/get/"+uni.getStorageSync("userId")
				})
				this.user = res.data.data
				console.log(res.data)
			}
		},
		onLoad(opstion) {
			this.bookDataId = opstion.id
			this.getComments(this.bookDataId)
			this.getUserId()
		}
	}
</script>

<style lang="scss">
	.topitem{
		background-color: #f7f7f7;
	}
	.avtive{
		background-color: #fff1ee;
		color: #e26f3f;
	}
	.red{
		color: #FA3534;
	}
</style>
